<template>
<div>
  <el-table
      :data="users"
      border
      style="width: 100%">
    <el-table-column
        prop="id"
        label="id"
        width="180">
    </el-table-column>
    <el-table-column
        prop="username"
        label="用户名"
        width="180">
    </el-table-column>
    <el-table-column
        label="头像">
      <template slot-scope="scope">
        <img :src="scope.row.headUrl"/>
      </template>
    </el-table-column>
    <el-table-column
        label="身份">
      <template slot-scope="scope">
        <span v-if="scope.row.admin==1">管理员</span>
        <span v-if="scope.row.admin==0">普通用户</span>
      </template>
    </el-table-column>
    <el-table-column
        label="状态">
      <template slot-scope="scope">
        <span v-if="scope.row.status==1">禁用</span>
        <span v-if="scope.row.status==0">启用</span>
      </template>
    </el-table-column>
    <el-table-column
        fixed="right"
        label="操作"
        width="100">
      <template slot-scope="scope">
        <el-button type="text" v-if="scope.row.status==0" @click="enable(scope.row, 1)" >禁用</el-button>
        <el-button type="text" v-if="scope.row.status==1" @click="enable(scope.row, 0)" >启用</el-button>
      </template>
    </el-table-column>
  </el-table>

</div>
</template>

<script>
export default {
  name: "UserInfo",
  data(){
    return{
      users:[],
    }
  },
  methods:{
    enable(val, status){
      let param = {
        userId: val.id,
        status: status
      }
      this.getRequest('/user/enable',param).then(()=>{
        this.getUsers()
      })
    },
    getUsers(){
      this.getRequest('/user/').then(resp=>{
        this.users = resp.data
      })
    }
  },
  created() {
    this.getUsers()
  }
}
</script>

<style scoped>
img{
  width: 50px;
  height: 50px;
}
</style>